<template>
  <view>
    <view class="box">
      <view class="box-item">
        <text>送达地点：</text>
        <textarea v-model="info.reachAddress" name="msg" id="" cols="30" rows="10" placeholder="请输入送达地址物品等"></textarea>
      </view>
      <view class="info">
        <view class="userInfo-item">
          <text>取件地点：</text>
          <input v-model="info.address" type="text" placeholder="输入取件地点" />
        </view>
        <view class="userInfo-item">
          <text>金额：</text>
          <input v-model="info.money" type="text" placeholder="0" />
        </view>
      </view>
      <view style="margin: 20rpx; text-align: center;">
        <text style="font-size: 32rpx; display: block; margin-bottom: 20rpx;">跑腿费</text>
        <text style="font-size: 40rpx; color: red;">{{info.money ? info.money : 0}}元</text>
      </view>
      <button class="pub" @click="sub">立即发布</button>
    </view>

    <text class="footer">用户条款&隐私策略</text>
  </view>
</template>

<script>
  import {
    AddOrder
  } from '../../request/api'
  export default {
    data() {
      return {
        info: {
          // 送达地点
          reachAddress: '',
          address: '',
          money: 0,
          phone: uni.getStorageSync('userInfo').phoneNum,
          user_pic: uni.getStorageSync('userImg')
        }
      }
    },
    methods: {
      sub() {
        const helpInfo = {
          type: '帮我送',
          money: this.info.money,
          state: 0,
          address: this.info.reachAddress,
          orderInfo: JSON.stringify(this.info),
          user_id: uni.getStorageSync('userInfo').id
        }
        // console.log(helpInfo)
        AddOrder(helpInfo).then(res => {
          // console.log(res)
          this.info = ''
          uni.showToast({
            icon: 'success',
            title: '提交成功'
          })
        }).catch(err => {
          console.log(err)
        })
        setTimeout(() => {
          uni.switchTab({
            url: '/pages/index/index'
          })
        }, 800)
      }
    }
  }
</script>

<style>
  page {
    background-color: #e6e6e6;
  }

  .box {
    width: 80%;
    background-color: #ffffff;
    margin: 30rpx;
    padding: 40rpx;
    box-shadow: 5px 5px 10px 0px rgba(0, 0, 0, 0.5);
    border-radius: 32rpx;
  }

  .userInfo-item {
    width: 100%;
    height: 100rpx;
    background-color: #ffffff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1rpx solid #e7e7e7;
  }

  .userInfo-item text {
    margin-left: 40rpx;
  }

  .userInfo-item input {
    text-align: right;
    /* padding-right: 40rpx; */
  }

  .userInfo-item .icon-ditu_dingwei {
    font-size: 48rpx;
  }

  .pub {
    width: 90%;
    border-radius: 100rpx;
    background: #0f67d0;
    color: #fff;
    margin-top: 60rpx;
  }

  .footer {
    font-size: 36rpx;
    color: #76a5e1;
    display: flex;
    justify-content: center;
  }

  text {
    font-size: 32rpx;
    font-weight: 600;
  }

  textarea {
    margin: 16rpx auto;
    padding: 20rpx;
    border: 1rpx solid #e9e9e9;
  }
</style>